<template>
  <div>
    <h3 class="title">中国宇航学会</h3>
    <el-form
      ref="resList"
      :name="resList"
      :model="resList"
      :rules="rules"
      :disabled="formDis"
      label-width="120px"
      class="demo-ruleForm"
      style="margin-top: 20px;">
      <el-form-item label="官方名称" prop="name">
        <el-col :span="10" >
          <span>{{ resList.name }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="官方介绍" prop="introduction">
        <div style="width:98%">
          <div v-if="formDis" class="tin_box" v-html="$xss(resList.introduction)" />
          <tinymce v-else v-model="resList.introduction" :height="260" :disabled="tinymceDis" />
        </div>
      </el-form-item>
      <el-form-item :class="formDis?'':'add_tip'" label="上传封面图" prop="cost">
        <el-col :span="24" >
          <div style="width:320px" class="fl">
            <div class="thumbnail">
              <img v-show="resList.imgUrl" :src="resList.imgUrl" alt="">
            </div>
            <div v-if="!formDis" class="uploadBox">
              <vueCropper
                :fixed-number="[16,8]"
                :limit="1"
                img-type="slt"
                class="upload-demo fl"
                @modalShowFn="getModalStatus" />
              <el-button v-show="resList.imgUrl" class="btn_clear fr" size="small" type="info" @click="clearPic()">清除</el-button>
              <!-- <p slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png/gif文件</p> -->
            </div>
          </div>
        </el-col>
      </el-form-item>
      <el-form-item style="margin-top:40px;">
        <el-button v-preventReClick type="primary" @click="submitForm('resList')">确定</el-button>
        <el-button v-preventReClick @click="$router.go(-1)">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import config from '@/utils/config';
import Tinymce from '@/components/Tinymce'
import { GetQiniuToken } from '@/utils/qiniuUpload.js'
import { Message } from 'element-ui'
import mixin from '@/mixin'
// import { provinceAndCityData, regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { getLocalUserName, setLocalUserName } from '@/utils/uid'

import vueCropper from '@/components/cropper'
import UploadImg from '@/components/cropper/uploadImage.vue'
import { getWebsite, editWebsite } from '@/api/website'

export default {
  components: { Tinymce, vueCropper, UploadImg },
  mixins: [mixin],
  data() {
    return {
      attack: 'vue is interseting!<img src=x onerror="alert(document.cookie)">',
      resList: {
        name: '',
        introduction: '',
        imgUrl: '',
        recommendStatus: ''
      },
      rules: {
        name: [
          { required: true, message: '报名入口名称', trigger: 'blur' },
          { max: 20, message: '输入字符不得超过20个', trigger: 'blur' }
        //   { pattern: /^[A-z0-9\u4e00-\u9fa5]*$/, message: '不能含有特殊字符', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '报名介绍', trigger: 'change' }
          // { max: 100, message: '输入字符不得超过100个', trigger: 'blur' }
        ],
        recommendStatus: [
          { required: true, message: '请选择是否推荐', trigger: 'change' }
          // { validator: validateNum, message: '请输入数字', trigger: 'blur' },
          // { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '数值需大于0', trigger: 'blur' }
        ]
      },
      isEdit: false,
      fileList: [],
      uploadData: {
        key: '',
        token: ''
      },
      formDis: false,
      tinymceDis: false,

      selectShow: false,
      isDisabled: false
    }
  },
  computed: {
    ruleForm: function() {
      return this.$store.getters.ruleForm
    }
  },
  watch: {
  },
  created() {
    console.log('1', this.$xss(this.attack))
    console.log('2', this.attack)
    this.userName = getLocalUserName()
    if (this.userName !== 'admin') this.tinymceDis = true
  },
  mounted() {
    this.getWebsiteFn(0)
  },
  methods: {
    clearPic() {
      this.resList.imgUrl = ''
    },
    getWebsiteFn(num) {
      getWebsite().then(res => {
        console.log('getWebsiteFn::::', res)
        if (res.code === '200') {
          this.resList = res.data[num]
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    getModalStatus(url) {
      this.resList.imgUrl = url
    },
    request(data) {
      editWebsite(data).then(response => {
        console.log(data)
        if (Number(response.code) === 200) {
          Message.success('编辑成功')
          // this.$router.go(-1)
        } else {
          Message.error(response.message + '-' + response.data)
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.resList.imgUrl === '') {
            Message.error('请上传图片')
            return
          }
          // console.log(this.resList)
          this.request(this.resList)
        } else {
          this.validateError()
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select,.el-cascader{
    display: block !important;
}
.title{
    margin-left: 20px;
}
  .tip {
    color: red;
  }
  .tin_box {
    border: 1px solid #ddd;
    padding: 0 10px 0 10px;
    color:#666;
  }
  .line{
    text-align: center;
  }

  /*上传图片*/
  .thumbnail{
        width: 302px;
        height: 151px;
        border: 1px solid #eee;
        border-radius: 5px;
        display: flex;
        // flex-item-align: center;
    }
    .thumbnail_video{
        padding: 10px;
        width: 340px;
        height: 200px;
        border: 1px solid #eee;
        border-radius: 5px;
        display: flex;
    }

    .thumbnail img{
        width: 100% ;
    }
    .uploadBox{
        width: 100%;
        position: relative;
    }
    .btn_clear{
        position: absolute;
        top: 4px;
        right: 19px;
        padding: 10px 30px;
    }
</style>
